<template>
  <div>
    <div class="breadcrumb">
      <span class="breadcrumb_left">您的位置：</span>
      <a-breadcrumb class="breadcrumb_right">
        <a-breadcrumb-item><a href="">CS毕设吧</a></a-breadcrumb-item>
        <a-breadcrumb-item>{{ info.title }}</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="">
      <div class="blog_box">
        <div class="spin_box">
          <a-spin size="large" :spinning="spinningLoading" />
        </div>
        <div v-show="!spinningLoading">
          <h1 class="article_info1_title">{{ info.title }}</h1>
          <div class="article_info1">
            <span class="article_info1_li">发布时间：{{ info.time }}</span>
            <span class="article_info1_li" v-show="info.author != ''">编辑：{{ info.author }}</span>
            <span class="article_info1_li" v-show="info.browse != '' && info.browse != 0">{{ info.browse }}次浏览</span>
            <span class="article_info1_li">{{ info.tags }}</span>
            <span class="article_btn1" @click="goDown" v-show="info.showDownInfo">直达下载</span>
          </div>
          <div class="down_info" v-show="info.showDownInfo">
            <div class="down_flex">
              <div class="down_flex_li_img_box">
                <img v-show="info.mode == 1" class="down_flex_li_img_mode1" :src="info.img" alt="" />
                <img v-show="info.mode == 0" class="down_flex_li_img" :src="info.img" alt="" />
              </div>
              <div class="down_flex_li">
                <p v-show="info.fileSize">文件大小：{{ info.fileSize }}</p>
                <p v-show="info.fileVersion">文件版本：{{ info.fileVersion }}</p>
                <p v-show="info.supportLanguage">支持语言：{{ info.supportLanguage }}</p>
                <p v-show="info.downTimes">下载次数：{{ info.downTimes }}</p>
                <div class="down_flex_btn" @click="goDown">立即下载</div>
              </div>
              <div class="down_flex_li">
                <p v-show="info.time">更新日期：{{ info.time }}</p>
              </div>
            </div>
          </div>
          <div class="article_summary">
            <strong>摘要：{{ info.summary }}</strong>
          </div>
          <div class='demo' v-if="info.video">
            <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
            </video-player>
          </div>
          <mavon-editor v-model="content" :value="content" defaultOpen="preview" :boxShadow="false" style="z-index:1;margin-top: 10px;" :editable="false" :subfield="false" :toolbarsFlag="false" />
        </div>
      </div>
    </div>
    <a-modal :maskClosable="false" v-model="visible" :title="visibleTitle" cancelText="取消" :confirmLoading="confirmLoading">
      <div>
        <div class="modal_box" v-show="downAdress == ''">
          <img class="modal_img" :src="codeImg" alt="">
          <p>为打击盗链困扰，本站已启用公众号人机验证</p>
          <p>微信扫码关注公众号，发送"1024"二字获得验证码，验证码5分钟有效。</p>
          <a-input class="modal_input" placeholder="请输入验证码" v-model="modalInputVal" />
        </div>
        <div class="modal_downAdress" v-show="downAdress != ''">
          <p v-for="(item , i) in downAdress.split(/[(\r\n)\r\n]+/)" :key="i">{{item}}</p>
        </div>
        <div class="warning_box">
          <a-tag color="red" v-show="downWarning" class="warning"> {{downWarningVal}} </a-tag>
        </div>
      </div>
      <template slot="footer">
        <a-button type="primary" @click="downAdress == ''?handleOk():handleNo()">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import List from '@/components/List';

import { getBlogDetail, downloadInfo } from '@/api/blog';
export default {
  components: { List },
  name: 'gamePlayer',
  data() {
    return {
      aa:'www.baidu,com↵www.baidu,com↵www.baidu,com↵www.baidu,com',
      visible: false,
      visibleTitle: '验证下载',
      info: {
        title: '暂无填写',
        time: '2020/9/14 9:28:29',
        author: '暂无填写',
        browse: '暂无填写',
        summary: '暂无填写',
        img: require('@/assets/img/defaultdll.png'),
        showDownInfo: true,
        fileSize: '暂无填写',
        fileVersion: '暂无填写',
        supportLanguage: '暂无填写',
        downTimes: '暂无填写',
        updateDate: '暂无填写',
      },
      codeImg: require('@/assets/img/chromecj.jpg'),
      content: '',
      modalInputVal: '',
      downAdress: '',
      downWarning: false,
      downWarningVal: '',
      confirmLoading: false,
      //文章加载
      spinningLoading: false,
      //
      playerOptions: {
        //播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [
          {
            //类型
            type: 'video/mp4',
            //url地址
            src: '',
          },
        ],
        //你的封面地址
        poster: '',
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true,
        },
      },
    };
  },
  created() {
    this.init();
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.id != from.query.id && to.query.id != null) {
        //pid不为空才请求数据
        this.id = to.query.id;
        this.init(); //调接口，请求数据
      }
    },
  },
  methods: {
    init() {
      this.spinningLoading = true;
      let id = this.$route.query.id;
      getBlogDetail(id)
        .then(
          (res) => {
            let data = res.result;
            this.info = {
              title: data.title,
              time: data.updateTime,
              author: data.author,
              browse: data.browse,
              summary: data.summary,
              img: data.img ? data.img : require('@/assets/img/defaultdll.png'),
              showDownInfo: data.showDownInfo == 0 ? false : true,
              fileSize: data.fileSize,
              fileVersion: data.fileVersion,
              supportLanguage: data.supportLanguage,
              downTimes: data.downTimes,
              updateDate: data.updateDate,
              video: data.video,
              mode: data.mode,
            };
            this.content = data.content;
            this.playerOptions.sources[0].src = data.video;
          },
          (err) => {
            this.$message.warning('提交失败');
          }
        )
        .finally(() => {
          this.spinningLoading = false;
        });
    },
    //下载地址
    handleOk() {
      this.confirmLoading = true;
      let param = {
        id: this.$route.query.id,
        code: this.modalInputVal,
      };
      downloadInfo(param)
        .then((res) => {
          if (res.code == 0) {
            this.downAdress = res.result.split('/n')[0];
            this.downWarning = false;
            this.visibleTitle = '下载地址';
          } else {
            this.$message.warning(res.message);
            this.downWarning = true;
            this.downWarningVal = res.message;
          }
        })
        .finally(() => {
          this.confirmLoading = false;
        });
    },
    handleNo(){
      this.visible = false;
    },
    goDown() {
      this.visible = true;
    },
  },
};
</script>

<style scoped>
.breadcrumb {
  width: 100%;
  margin: 15px;
  overflow: hidden;
}
.breadcrumb_left {
  float: left;
}
.breadcrumb_right {
  float: left;
}
.article_info1 {
  margin-top: 12px;
  margin-bottom: 10px;
}
.article_info1_li {
  margin-right: 10px;
}
.article_info1_title {
  font-size: 20px;
  font-weight: 800;
}
.article_btn1 {
  float: right;
  overflow: hidden;
  color: #2683ff;
  border: 1px solid #2683ff;
  border-radius: 4px;
  padding: 2px 8px;
}
.article_summary {
  clear: both;
  background: #f6f6f6;
  padding: 12px;
  line-height: 28px;
  overflow: hidden;
  border-radius: 4px;
}
/*down_info*/
.down_info {
  background: #f2f2f2;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.down_flex {
  display: flex;
}
.down_flex_li {
  flex: 1 1 auto;
  padding: 0px 10px;
  position: relative;
}
.down_flex_li p {
  margin-bottom: 0.5em;
}
.down_flex_li_img_box{
  width: 250px;
  height: 165px;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
}
.down_flex_li_img {
  width: 250px;
  height: 165px;
}
.down_flex_li_img_mode1 {
  max-width: 250px;
  height: 165px;
  margin: auto;
}
.down_flex_btn {
  position: absolute;
  bottom: 0px;
  left: 10px;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  margin-right: 30px;
  margin-top: 30px;
  text-align: center;
  width: 120px;
  background-color: #2683ff;
}
/**/
.modal_box {
  text-align: center;
}
.modal_box p {
  color: red;
  margin: 5px;
}
.modal_input {
  margin-top: 10px;
}
.modal_downAdress {
  margin-top: 10px;
}
.warning_box {
  text-align: center;
}
.warning {
  color: red;
  margin: 10px auto;
  font-size: 14px;
  padding: 5px 10px;
}

.bread-div {
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
  background-color: #e1f0ff;
}
.detailed-title {
  font-size: 1.8rem;
  text-align: center;
  padding: 1rem;
}
.center {
  text-align: center;
}
.detailed-content {
  padding: 1.3rem;
  font-size: 1rem;
}
pre {
  display: block;
  background-color: #f3f3f3;
  padding: 0.5rem !important;
  overflow-y: auto;
  font-weight: 300;
  font-family: Menlo, monospace;
  border-radius: 0.3rem;
}
pre {
  background-color: #283646 !important;
}
pre > code {
  border: 0px !important;
  background-color: #283646 !important;
  color: #fff;
}
code {
  display: inline-block;
  background-color: #f3f3f3;
  border: 1px solid #fdb9cc;
  border-radius: 3px;
  font-size: 12px;
  padding-left: 5px;
  padding-right: 5px;
  color: #4f4f4f;
  margin: 0px 3px;
}

.title-anchor {
  color: #888 !important;
  padding: 4px !important;
  margin: 0rem !important;
  height: auto !important;
  line-height: 1.2rem !important;
  font-size: 0.7rem !important;
  border-bottom: 1px dashed #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active {
  color: rgb(30, 144, 255) !important;
}
.nav-title {
  text-align: center;
  color: #888;
  border-bottom: 1px solid rgb(30, 144, 255);
}
.article-menu {
  font-size: 12px;
}
iframe {
  height: 34rem;
}
.detailed-content img {
  width: 100%;
  border: 1px solid #f3f3f3;
}
.title-level3 {
  display: none !important;
}
.ant-anchor-link-title {
  font-size: 12px !important;
}
.ant-anchor-wrapper {
  padding: 5px !important;
}

code {
  background-color: #2683ff !important;
}
/** */
.demo {
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
  margin-top: 10px;
}

.demo:hover {
  display: block;
}
</style>